<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <!-- vue 生命周期函数 -->
    <div id="app">
        <p>{{message}}</p>
        <!-- 增加一个绑定 -->
        <input type="text" v-model="message">
    </div>
    <script>
        let vue = new Vue({
            el: "#app",
            data: {
                message: "Vue 生命周期"
            },
            //创建vue实例之前调用
            beforeCreate: function() {
                console.group("beforeCreate 创建前");
                console.log("beforeCreate");
                console.log("el     : " + this.$el);
                console.log("data   : " + this.$data);
                console.log("message: " + this.message);
            },
            //创建完毕
            created: function() {
                console.group("created 创建完毕");
                console.log("created");
                console.log("el     : " + this.$el);
                console.log("data   : " + this.$data);
                console.log("message: " + this.message);
            },
            //挂载之前
            beforeMount: function() {
                console.group("beforeMount 挂载前");
                console.log("beforeCreate");
                console.log("el     : " + this.$el);
                console.log("data   : " + this.$data);
                console.log("message: " + this.message);
            },
            //挂载完毕
            mounted: function() {
                console.group("mounted 挂载完毕");
                console.log("mounted");
                console.log("el     : " + this.$el);
                console.log("data   : " + this.$data);
                console.log("message: " + this.message);
            },
            //vue实例更新之前 数据更新,dom更新才执行
            beforeUpdate: function() {
                console.group("beforeUpdate 更新前");
                console.log("beforeUpdate");
                console.log("el     : " + this.$el);
                console.log("data   : " + this.$data);
                console.log("message: " + this.message);
            },
            //更新完毕
            updated: function() {
                console.group("updated 更新完毕");
                console.log("updated");
                console.log("el     : " + this.$el);
                console.log("data   : " + this.$data);
                console.log("message: " + this.message);
            },
            //vue实例销毁之前
            beforeDestroy: function() {
                console.group("beforeDestroy 销毁前");
                console.log("beforeDestroy");
                console.log("el     : " + this.$el);
                console.log("data   : " + this.$data);
                console.log("message: " + this.message);
            },
            //销毁完毕
            destroyed: function() {
                console.group("destroyed 销毁完毕");
                console.log("destroyed");
                console.log("el     : " + this.$el);
                console.log("data   : " + this.$data);
                console.log("message: " + this.message);
            }
        });
    </script>
</body>

</html>